<#include "/include/layout.ftl" />

<@layout "用户登录">

    <div class="layui-container fly-marginTop">
        <div class="fly-panel fly-panel-user" pad20>
            <div class="layui-tab layui-tab-brief" lay-filter="user">
                <ul class="layui-tab-title">
                    <li class="layui-this">登入</li>
                    <li><a href="/register">注册</a></li>
                </ul>
                <div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-form layui-form-pane">
                            <form method="post">
                                <div class="layui-form-item">
                                    <label for="L_email" class="layui-form-label">账号</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="L_email" name="username" required lay-verify="required"
                                               placeholder="请输入邮箱/昵称" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="L_pass" class="layui-form-label">密码</label>
                                    <div class="layui-input-inline">
                                        <input type="password" id="L_pass" name="password" required
                                               lay-verify="required"
                                               placeholder="请输入密码" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <#-- <div class="layui-form-item">
                                     <label for="L_vercode" class="layui-form-label">人类验证</label>
                                     <div class="layui-input-inline">
                                         <input type="text" id="L_vercode" name="vercode" required lay-verify="required"
                                                placeholder="请输入验证码" autocomplete="off" class="layui-input">
                                     </div>
                                     <div class="layui-form-mid" style="padding: 0!important;">
                                         <img id="captcha" src="/captcha.jpg" alt="验证码" style="cursor:pointer;">
                                     </div>
                                 </div>-->
                                <div class="layui-form-item">
                                    <#-- 页面资源未加载完全时，先把登录按钮禁掉 -->
                                    <button id="loginBth" class="layui-btn" disabled style="background-color: rgba(113,113,113,0.45)" lay-filter="*" lay-submit>请稍等...</button>
                                    <span style="padding-left:20px;">
                                        <a href="/forgetPass">忘记密码？</a>
                                    </span>
                                </div>
                                <div class="layui-form-item fly-form-app">
                                    <span>或者使用社交账号登入</span>
                                    <a href="/app/qq" onclick="layer.msg('正在通过QQ登入', {icon:16, shade: 0.1, time:0})"
                                       class="iconfont icon-qq" title="QQ登入"></a>
                                    <a href="/app/weibo" onclick="layer.msg('正在通过微博登入', {icon:16, shade: 0.1, time:0})"
                                       class="iconfont icon-weibo" title="微博登入"></a>
                                    <#--<a href="javascript:void(0);" onclick="toSocialLogin('QQ', 'qq')"
                                       class="iconfont icon-qq" title="QQ登入"></a>
                                    <a href="javascript:void(0);" onclick="toSocialLogin('微博', 'weibo')"
                                       class="iconfont icon-weibo" title="微博登入"></a>-->
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
      layui.cache.page = 'user';

      // 页面加载完成后，打开登录按钮
      window.onload = function () {
        var $loginBth = $('#loginBth');
        $loginBth.removeProp('style')
        $loginBth.removeProp('disabled')
        $loginBth.text('立即登录')
      }

      function btnOpen(uri, windowName) {
        //设置弹出窗口为浏览器的70%宽，60%高
        let viewHeight = (window.screen.height) * 0.6;
        let viewWidth = (window.screen.width) * 0.7;

        //浏览器和屏幕上面和左边的距离
        let t = window.screenY;
        let l = window.screenX;

        let iTop = (window.screen.height - viewHeight) / 2 + t;
        let iLeft = (window.screen.width - viewWidth) / 2 + l;

        window.open(uri, windowName, "width=" + viewWidth + ",height=" + viewHeight + ",top=" + iTop + ",left=" + iLeft + "");
      }

      function toSocialLogin(name, uriType) {
        layer.msg('正在通过' + name + '登入', {btn: '关闭', icon: 16, shade: 0.1, time: 0});
        btnOpen("/app/" + uriType, name + "登录");
      }
    </script>
</@layout>
